<template>
	<view>
		<view class="container">
			<view class="block">广告位</view>
			<view class="content">
				<view class="title">充值金额</view>
				<view class="item_box flex_">
					<view class="item flex_ccenter" :key="k" v-for="(item, k) in list" @click="change(item, k)" :class="current == k ? 'change_item' : ''">
						<view class="x1">{{ item.x1 }}元</view>
						<view class="x2">赠送{{ item.x2 }}</view>
					</view>
				</view>
			</view>
			<view class="mode_box">
				<view class="title">支付方式</view>
				<view class="mode flex_between">
					<view class="left flex_">
						<!-- <image src="../../static/weixin.png" class="img" mode=""></image> -->
						<view class="">微信支付</view>
					</view>
					<!-- <view class="right"><image src="../../static/chenggong.png" class="img" mode=""></image></view> -->
				</view>
			</view>
			<view class="submit" @click="sub" hover-class="hover">立即充值</view>
			<view class="xieyi flex_center" @click="change = !change">
				<view class="imgs">
					<!-- <image src="../../static/chenggong.png" v-if="changexieyi" class="img" mode=""></image> -->
					<!-- <image src="../../static/buchenggong.png" v-else class="img" mode=""></image> -->
				</view>
				<view class="">
					已阅读并同意
					<text style="color: #333333;">《惠安充电充值协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			changexieyi: true,
			current: 0,
			list: [
				{
					x1: '100',
					x2: '40'
				},
				{
					x1: '100',
					x2: '40'
				}
			]
		};
	},
	methods: {
		sub() {
			if (!this.change) return uni.$showMsg('请阅读并勾选充值协议~');
			uni.navigateTo({
				url: '/pages/payRes/payRes'
			});
		},
		change(item, k) {
			this.current = k;
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding-top: 20rpx;
}

.block {
	overflow: hidden;
	width: 100%;
	height: 225rpx;
	border-radius: 20rpx;
	background-color: yellow;
}

.content {
	padding: 25rpx 0;

	.title {
		padding: 20rpx 0;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.item_box {
		flex-wrap: wrap;

		.item {
			width: 213rpx;
			height: 139rpx;
			background: #f6f6f6;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			margin-right: 30rpx;

			.x1 {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.x2 {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}

		.change_item {
			background-color: #429efe;

			.x1,
			.x2 {
				color: #fff;
			}
		}

		.item:nth-child(3n) {
			margin-right: 0;
		}
	}
}

.mode_box {
	.title {
		padding: 20rpx 0;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.mode {
		padding: 0 35rpx;
		height: 88rpx;
		border: 1rpx solid #e7e7e7;
		border-radius: 44rpx;

		.right {
			width: 39rpx;
			height: 39rpx;
		}

		.left {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;

			.img {
				width: 40rpx;
				height: 35rpx;
				margin-right: 20rpx;
			}
		}
	}
}
.submit {
	margin-top: 30rpx;
	color: #fff;
	background: #ff8e21;
}
.xieyi {
	margin-top: 30rpx;
	color: #999999;
	font-size: 22rpx;
	.imgs {
		width: 24rpx;
		height: 24rpx;
		margin-right: 15rpx;
	}
}
</style>
